<template>
  <!-- 司机详情页 -->
  <div class="app-container">
    <el-container>
      <div class="aside-box">
        <el-tabs v-model="activeName" style="height: 580px;" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form ref="form" :model="form" label-width="100px" label-position="left">
              <el-row :gutter="20">
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="员工编号：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="form.userId" disabled placeholder="请输入快递员账号" />
                    <span v-else>{{ form.userId }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="司机名称：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="form.name" disabled placeholder="请输入快递员账号" />
                    <span v-else>{{ form.name }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="所属机构：" style="margin: 20px 0 10px;">
                    <!-- <el-input v-if="isEdit" v-model="form.name" disabled placeholder="请输入快递员账号" /> -->
                    <el-input v-if="isEdit" v-model="form.agency.name" disabled placeholder="请输入快递员账号" />
                    <!-- <span v-else>{{ form.agency.name }}</span> -->
                    <span v-else>{{ agencyName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="电话：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="form.mobile" disabled placeholder="请输入快递员账号" />
                    <span v-else>{{ form.mobile }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="年龄：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="form.age" placeholder="请输入年龄" />
                    <span v-else>{{ form.age }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="驾驶证信息" name="second">
            <el-form ref="form" :model="LicenseForm" label-width="130px" label-position="left">
              <el-row :gutter="20">
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="驾驶证号：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.licenseNumber" placeholder="请输入驾驶证号" />
                    <span v-else>{{ LicenseForm.licenseNumber }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="准驾车型：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.allowableType" placeholder="请输入准驾车型" />
                    <span v-else>{{ LicenseForm.allowableType }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="初次领证日期：" style="margin: 20px 0 10px;">
                    <!-- <el-input v-if="isEdit" v-model="LicenseForm.initialCertificateDate" placeholder="请输入初次领证日期" /> -->
                    <el-date-picker v-if="isEdit" v-model="LicenseForm.initialCertificateDate" type="date" placeholder="选择日期" style="width: 100%;" />
                    <span v-else>{{ LicenseForm.initialCertificateDate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="驾驶证有效期限：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.validPeriod" placeholder="请输入有效期限">
                      <span slot="suffix" style="font-weight: 400; margin-right: 10px; color: black;">
                        年
                      </span>
                    </el-input>
                    <span v-else>{{ LicenseForm.validPeriod }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="驾龄：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.driverAge" placeholder="请输入驾龄">
                      <span slot="suffix" style="font-weight: 400; margin-right: 10px; color: black;">
                        年
                      </span>
                    </el-input>
                    <span v-else>{{ LicenseForm.driverAge }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="驾驶证类型：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.licenseType" placeholder="请输入驾驶证类型" />
                    <span v-else>{{ LicenseForm.licenseType }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="从业资格证：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.qualificationCertificate" placeholder="请输入从业资格证信息" />
                    <span v-else>{{ LicenseForm.qualificationCertificate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="入场证信息：" style="margin: 20px 0 10px;">
                    <el-input v-if="isEdit" v-model="LicenseForm.passCertificate" placeholder="请输入入场证信息" />
                    <span v-else>{{ LicenseForm.passCertificate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="padding-left: 30px; padding-right: 30px;">
                  <el-form-item label="图片信息：" style="margin: 20px 0 10px;">
                    <!-- 上传时候的图片 -->
                    <div v-if="isEdit" class="upload">
                      <div v-for="item in imgSrc" :key="item" class="img-box">
                        <img :src="item" style="width: 212px; height: 159px; border: 1px solid rgb(216, 221, 227); border-radius: 4px; margin-right: 20px;">
                        <div class="img-shadow">
                          <img class="el-upload-span searchBigImg" src="" alt="" @click="handlePictureCardPreview(item)">
                          <img class="el-upload-span" src="" @click="handleRemove(item)">
                        </div>
                      </div>
                    </div>
                    <!-- 默认展示时候的图片 -->
                    <div v-else class="demo-image__placeholder" style="display: flex;">
                      <div v-for="item in imgSrc" :key="item" class="img-box">
                        <img :src="item" style="width: 212px; height: 159px; border: 1px solid rgb(216, 221, 227); border-radius: 4px; margin-right: 20px;">
                        <div class="img-shadow">
                          <img class="el-upload-span searchBigImg" src="" alt="" @click="handlePictureCardPreview(item)">
                        </div>
                      </div>
                    </div>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-row type="flex" justify="end" align="bottom">
          <el-col>
            <el-row type="flex" justify="center">
              <div v-if="isEdit" style="text-align: center;">
                <el-button size="medium " style="width: 110px; height: 40px;" type="primary">保存</el-button>
                <el-button size="medium " style="width: 110px; height: 40px;" type="primary" @click="isEdit = false">取消</el-button>
              </div>
              <div v-else style="text-align: center;">
                <el-button size="medium " style="width: 110px; height: 40px;" type="primary" @click="editFn">编辑</el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-container>

  </div>
</template>

<script>
import { getDriverDetailApi, getDriverLicenseApi } from '@/api/courier'
export default {
  data() {
    return {
      activeName: 'first',
      isEdit: false,
      form: {}, // 表单数据
      LicenseForm: {}, // 驾驶证信息表单数据
      // 驾照图片来源
      imgSrc: [],
      // 所属机构名字
      agencyName: '',
      // 图片上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  async created() {
    this.handleClick()
    // console.log(this.$route)
    // console.log(this.$route.params.id)
    // const res = await getDriverDetailApi(this.$route.params.id)
    // const res = await getDriverDetailApi('1025112013736764417')
    // console.log(res)
    // this.form = res
  },
  methods: {
    editFn() {
      this.isEdit = true
    },
    // 点击导航
    async  handleClick() {
      this.isEdit = false
      if (this.activeName === 'first') {
        this.form = await getDriverDetailApi(this.$route.params.id)
        this.agencyName = this.form.agency.name
        console.log(this.form)
      } else if (this.activeName === 'second') {
        const res = await getDriverLicenseApi(this.$route.params.id)
        this.imgSrc = res.picture.split(',')
        console.log(this.imgSrc)
        this.LicenseForm = res
        console.log(this.LicenseForm)
        // console.log(tab)
        // console.log(this.activeName)
      // console.log(event)
      }
    },
    // 图片上的删除
    handleRemove(file) {
      // 根据文件名 查找索引
      const index = this.imgSrc.indexOf(file)
      // 删除图片
      this.imgSrc.splice(index, 1)
    },
    // 图片上的放大镜
    handlePictureCardPreview(file) {
      // 将想要放大的图片放到弹框中
      this.dialogImageUrl = file
      // 打开放大的弹框
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.aside-box{
  width: 1139px;
    background: #fff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #fff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;

      }
      .active {
        font-size: 16px;
        font-weight: 700;
        color: #20232a;
        }
}
.img-box{
  display: inline-block;
  position: relative;
  .img-shadow {
    position: absolute;
    top: 0;
    width: 212px;
    height: 159px;
    background: rgba(0,0,0,.5);
    border-radius: 4px;
    text-align: center;
    display: none;
    }
    &:hover{
      .img-shadow{
        display: block;
      }
    }
}
.upload{
  .searchBigImg{
    margin-right: 40px;
  }
}

.searchBigImg{
  width: 28px;
  height: 28px;
  margin-top: 64px;
  cursor: pointer;
}
.el-upload-span{
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
</style>
